<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子向父的通信</title>
</head>
<body>
<!-- 嵌套关系：app 嵌套 counter -->
<div id="app">
    <h2>num: {{num}}</h2>
    <!-- @inc 自定义事件" -->
    <counter :count="num" @incr="increment" @decr="decrement"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("counter", { // 子组件，定义了两个按钮，点击按钮，数字num会加或减。
        // 任何模板只能有一个“根元素”
        template:'\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">减</button>  \
                </div>',
        props:['count'], // count是从父组件获取的。
        methods:{
            plus(){
                this.$emit("incr");
            },
            reduce(){
                this.$emit("decr");
            }
        }
    })

    var app = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods:{ // 父组件中定义操作num的方法
            increment(){
                this.num++;
            },
            decrement(){
                this.num--;
            }
        }
    })
</script>
</body>
</html>
